<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~  This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~  You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org.
  -->

<div xmlns="http://www.w3.org/1999/html" tab-scroll>
  <div ng-hide="geoZone.id"><h2 id="addNewGeoZoneHeader" openlmis-message="header.geo.zone.add.new"></h2></div>
  <div ng-show="geoZone.id"><h2 id="editGeoZoneHeader" openlmis-message="header.geo.zone.edit"></h2></div>

  <form ng-submit="saveGeoZone()" name="geoZoneForm" novalidate>
    <div class="app-form">

      <div id="geoZoneFormGroup" class="form-group clear-top">

        <div class="form-row clearfix">
          <div class="form-cell">
            <label id="codeLabel" for="code">
              <span openlmis-message="header.code"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field">
              <input ng-model="geoZone.code" name="code" id="code" type="text" maxlength="50" ng-required="true"/>
              <span class="field-error" ng-show="geoZoneForm.code.$error.required && showError"
                    openlmis-message="missing.value"></span>
            </div>
          </div>

          <div class="form-cell">
            <label id="levelLabel">
              <span openlmis-message="header.level"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field">
              <select id="levelCode" name="levelCode" ng-model="geoZone.level.code"
                      ng-options="level.code as level.name for level in levels"
                      ng-change="loadParents(geoZone.level.code)"
                      ng-disabled="editMode">
                <option value="" openlmis-message="label.select.geographic.level"></option>
              </select>
              <span class="field-error" ng-show="!geoZone.level.code && showError"
                    openlmis-message="select.value"></span>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label id="nameLabel" for="name">
              <span openlmis-message="header.name"></span>
              <span class="label-required"> *</span>
            </label>

            <div class="form-field">
              <input ng-model="geoZone.name" name="name" id="name" type="text" maxlength="50" ng-required="true"/>
              <span class="field-error" ng-show="geoZoneForm.name.$error.required && showError"
                    openlmis-message="missing.value"></span>
            </div>
          </div>

          <div class="form-cell">
            <label id="parentLabel" openlmis-message="header.parent"></label>

            <div class="form-field row-fluid">
              <select ui-select2="{width: '90%'}" class="span11" id="selectParentGeoZone" ng-model="geoZone.parent.code"
                      openlmis-message="label.select.parent.zone">
                <option value=""></option>
                <optgroup ng-repeat="geoZoneLevel in parentLevels" label="{{ geoZoneLevel }}">
                  <option ng-repeat="parentGeoZone in parentGeoZones" ng-if="parentGeoZone.level.name === geoZoneLevel"
                          value="{{ parentGeoZone.code }}">
                    {{ parentGeoZone.name }}
                  </option>
                </optgroup>
              </select>
              <span class="field-error" ng-show="geoZoneForm.parent.code.$error.required && showError"
                    openlmis-message="missing.value"></span>
            </div>
          </div>
        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label id="populationLabel" for="catchment-population"
                   openlmis-message="label.catchment.population"></label>

            <div class="form-field">
              <input ng-model="geoZone.catchmentPopulation" id="catchment-population" ng-pattern="/^\d{1,9}$/"
                     name="catchmentPopulation" type="text" maxlength="9"/>
              <span class="field-error" ng-show="geoZoneForm.catchmentPopulation.$error.pattern"
                    openlmis-message="integer.value">
              </span>
            </div>
          </div>

        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label id="latitudeLabel" for="latitude" openlmis-message="label.latitude"></label>

            <div class="form-field">
              <input ng-model="geoZone.latitude" ng-pattern="/^[+-]?0*\d{0,3}(\.\d{1,5}0*)?$/" id="latitude" type="text"
                     name="latitude" maxlength="10"/>
              <span class="field-error" ng-show="geoZoneForm.latitude.$error.pattern"
                    openlmis-message="label.latitude.value"></span>
            </div>
          </div>

        </div>

        <div class="form-row clearfix">
          <div class="form-cell">
            <label id="longitudeLabel" for="longitude" openlmis-message="label.longitude"></label>

            <div class="form-field">
              <input ng-model="geoZone.longitude" ng-pattern="/^[+-]?0*\d{0,3}(\.\d{1,5}0*)?$/" name="longitude"
                     id="longitude" type="text" maxlength="10"/>
              <span class="field-error" ng-show="geoZoneForm.longitude.$error.pattern"
                    openlmis-message="label.longitude.value"></span>
            </div>
          </div>
        </div>

        <!-- /form-group -->

      </div>
      <div form-toolbar id="action_buttons" class="action-buttons">
        <div class="form-cell button-row">
          <input id="saveButton" type="submit" class="btn btn-primary save-button"
                 openlmis-message="button.save" ng-click="save()"/>
          <input id="cancelButton" type="button" class="btn btn-cancel cancel-button" openlmis-message="button.cancel"
                 ng-click="cancel()"/>
        </div>

        <div class="toolbar-error" id="saveErrorMsgDiv" openlmis-message="error" ng-show="error"></div>
      </div>

    </div>
  </form>
</div>


